<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Liste élèves</title>






<%-- <link type="text/css" rel="stylesheet" href="<c:url value ='/ressources/css/sideMenu.css'/>" /> --%>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<!-- Latest compiled and minified CSS -->
<link type="text/css" rel="stylesheet" href="<c:url value ='/ressources/css/framework/bootstrap/bootstrap.min.css'/>" />
<link type="text/css" rel="stylesheet" href="ressources/css/style.css" />
<link rel="stylesheet" href="ressources/metisMenu/dist/metisMenu.css" />
<link rel="stylesheet" href="ressources/metisMenu/dist/demo.css">
        

<link rel="stylesheet" href="ressources/DataTables-1.10.4/media/css/jquery.dataTables.css" />
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.3/css/dataTables.responsive.css" />
<link rel="stylesheet" href="ressources/DataTables-1.10.4/extensions/TableTools/css/dataTables.tableTools.css" />


<!-- Alertify stylesheets ! -->
<link type="text/css" rel="stylesheet" href="<c:url value ='/ressources/alertify.js-0.3.11/themes/alertify.core.css'/>" />
<link type="text/css" rel="stylesheet" href="<c:url value ='/ressources/alertify.js-0.3.11/themes/alertify.default.css'/>" />





<style type="text/css">
<!-- permet de coller le menu vertical à gauche -->
.menuColumn {
	
	padding-left: 0px!important;
}

</style>



</head>
<body>

<c:import url="horizontalNavMenu.jsp"></c:import>
<%-- <c:import url="slidingMenu.jsp"></c:import> --%>




		
<c:if test="${!empty listeEleves}">

<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="padding-left: 0px;">

<div class="clearfix">
 <aside class="sidebar">
    <nav class="sidebar-nav">
      <ul id="menu">
        <li class="active">
          <a href="#">
            <span class="sidebar-nav-item-icon fa fa-github fa-lg"></span>
            <span class="sidebar-nav-item">metisMenu</span>
            <span class="fa arrow"></span>
          </a>
          <ul>
            <li>
              <a href="https://github.com/onokumus/metisMenu">
                <span class="sidebar-nav-item-icon fa fa-code-fork"></span>
                Fork
              </a>
            </li>
            <li>
              <a href="https://github.com/onokumus/metisMenu">
                <span class="sidebar-nav-item-icon fa fa-star"></span>
                Star
              </a>
            </li>
            <li>
              <a href="https://github.com/onokumus/metisMenu/issues">
                <span class="sidebar-nav-item-icon fa fa-exclamation-triangle"></span>
                Issues
              </a>
            </li>
          </ul>
        </li>
          <li>
              <a href="#">Gestion des élèves <span class="fa arrow"></span></a>
              <ul>
              	  <li><a href="<c:url value ='/ajouterEleve'/>">Ajouter un nouvel élève</a></li>
				  <li><a href="<c:url value ='/listeEleves'/>">Consulter la liste des élèves</a></li>
                  <li><a href="#">Consulter fiche élève</a></li>
              </ul>
          </li>
          <li>
              <a href="#">Gestion d'activités <span class="glyphicon arrow"></span></a>
              <ul>
                  <li><a href="#">Créer une nouvelle activité</a></li>
                  <li><a href="#">Consulter la liste des activités</a></li>
                  <li>
                      <a href="#">Menu 1.3 <span class="fa plus-times"></span></a>
                      <ul>
                          <li><a href="#">item 1.3.1</a></li>
                          <li><a href="#">item 1.3.2</a></li>
                          <li><a href="#">item 1.3.3</a></li>
                          <li><a href="#">item 1.3.4</a></li>
                      </ul>
                  </li>
                  <li><a href="#">item 1.4</a></li>
                  <li>
                      <a href="#">Menu 1.5 <span class="fa plus-minus"></span></a>
                      <ul>
                          <li><a href="#">item 1.5.1</a></li>
                          <li><a href="#">item 1.5.2</a></li>
                          <li><a href="#">item 1.5.3</a></li>
                          <li><a href="#">item 1.5.4</a></li>
                      </ul>
                  </li>
              </ul>
          </li>
          <li>
              <a href="#">Menu 2 <span class="glyphicon arrow"></span></a>
              <ul>
                  <li><a href="#">item 2.1</a></li>
                  <li><a href="#">item 2.2</a></li>
                  <li><a href="#">item 2.3</a></li>
                  <li><a href="#">item 2.4</a></li>
              </ul>
          </li>
      </ul>
     </nav>
  </aside>
  </div>


</div>

<div class="col-sm-8">
    <div class="container-fluid">
   

    <div class=" panel panel-default">
		<!-- Default panel contents -->
		<div class="panel-heading">Liste des éléves</div>
		<br>
<div class="table-responsive">
<div class="responsive" >
<table class="table table-hover" id="listeElevesTable" >
				<thead>
					<tr>
						<th>
							#
						</th>
						<th>
							Prénom
						</th>
						<th>
							Nom
						</th>
						<th>
							Age
						</th>
						<th>
							Téléphone
						</th>
						<th>
							Email
						</th>
						<th>
							Matricule
						</th>
						<th>
							Photo
						</th>
					</tr>
				</thead>
				<tbody>
				<c:forEach items="${listeEleves}" var="eleve" varStatus="statut">
				  <c:choose>
					<c:when test='${(statut.index)%2 eq 0}'>
     				  <c:set var="rowColor" value="active" scope="page"/>
     				 </c:when>
     				 <c:otherwise>
     				 	<c:set var="rowColor" value="warning" scope="page"/>
     				 </c:otherwise>
     			  </c:choose>
     				 
					<tr class="${rowColor}">
						<td>${statut.count}</td>
						<td>${eleve.prenom}</td>
						<td>${eleve.nom}</td>
						<td>${eleve.age}</td>
						<td>${eleve.telephone}</td>
						<td>${eleve.email}</td>
						<td>${eleve.matricule}</td>
						<td>NF</td>
					</tr>
				</c:forEach>
				</tbody>
				
				<tfoot>
		<tr>
						<th>
							#
						</th>
						<th>
							Prénom
						</th>
						<th>
							Nom
						</th>
						<th>
							Age
						</th>
						<th>
							Téléphone
						</th>
						<th>
							Email
						</th>
						<th>
							Matricule
						</th>
						<th>
							Photo
						</th>
					</tr>
	</tfoot>
			</table>
	</div>		
	</div>
			</div>

		
			</div>
			</div>
			</div>
			</div>
			</c:if>
		
		
		
		
		
		
<script type="text/javascript" src="ressources/js/framework/jquery/jquery-1.11.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="ressources/js/framework/bootstrap/bootstrap.min.js"></script>



<script type="text/javascript" src="ressources/DataTables-1.10.4/media/js/jquery.dataTables.js"></script>
<script src="ressources/animatedtablesorter-0.2.2/tsort.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.3/js/dataTables.responsive.js"></script>
<script src="ressources/DataTables-1.10.4/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
	<script src="<c:url value ='/ressources/alertify.js-0.3.11/lib/alertify.min.js'/>" ></script>	
<script src="ressources/metisMenu/dist/metisMenu.min.js"></script>
			
			<script type="text/javascript">
			
					$(document).ready( function () {
						$("#menu").metisMenu();
					} );
			
			</script>
			
			
			<script type="text/javascript">
			
					$(document).ready( function () {
					    $('#listeElevesTable').DataTable( {
					    	
					    	searching: false,
					    	responsive: true,
					    	dom: 'T<"clear">lfrtip',
					        tableTools: {
					        	"aButtons": [ "pdf", "print" ],
					            "sSwfPath": "ressources/DataTables-1.10.4/extensions/TableTools/swf/copy_csv_xls_pdf.swf"
					        }
					    } );
					} );
			
			</script>
			
	
		
</body>
</html>